<template>
  <div class="tabnav">
    <van-nav-bar 
    :title="title" 
    :left-text="lftext" 
    :left-arrow="isleftarrow"
    @click-left="onClickLeft"
    @click-right="onClickRight" 
    :fixed="true"
    :class="{active:isactive,activeBc:activeBc}">
      <template #right>
        <slot></slot>
      </template>
    </van-nav-bar>
  </div>
</template>
<script>
export default {
  name:'NavBar',
  data() {
    return {};
  },
    props: {
      //   是否显示左侧箭头
      isleftarrow:{
          type:Boolean,
          default:false
      },
      // 标题
      title:{
          type:String,
          default:''
      },
       // 左侧文字
      lftext:{
          type:String,
          default:''
      },
       // 右侧标题
      rttext:{
          type:String,
          default:''
      },
    // 是否修改样式
    isactive:{
          type:Boolean,
          default:false
    },
    // 是否修改样式
    activeBc:{
          type:Boolean,
          default:false
    }
    },
  components: {},

  computed: {},
 
  methods: {
    onClickLeft() {
      this.$toast('返回');
    },
    onClickRight() {
       this.$toast('按钮');
    },
  }
};
</script>
<style lang='less'  >
.tabnav div.active {
  background: var(--bac_color)!important;
  /* vant ui 重置样式 */
.van-nav-bar .van-icon{
  color: var(--vant_color)
}
.van-nav-bar__title{
  color: var(--vant_color)
}
.van-nav-bar__text{
  color: var(--vant_color)
}
}
.tabnav div.activeBc{
  background: var(--vant_color)!important;
  /* vant ui 重置样式 */
.van-nav-bar .van-icon{
  color:var(--vant_textcolor)
}
.van-nav-bar__title{
 color:var(--vant_textcolor)
}
.van-nav-bar__text{
  color:var(--vant_textcolor)
}
}
</style>